<template>
  <div class="home">
      <van-pull-refresh v-model="common.refresh" @refresh="onRefresh" >
      <div class="header">
          <div v-if="userinfo.username">
              <el-avatar shape="square" :src="userinfo.avatar" fit="fill"  size = "large"></el-avatar>
            &nbsp;&nbsp;<div style="display: inline-block;">
                  Hello ~ {{ userinfo.nickName ? userinfo.nickName : userinfo.username}}
              </div>
              <div style="width: 20px; display: inline-block;margin-left: 5px" @click="goInfo">
                  <img style="width:100%" src="../assets/img/edit.png" alt="">
              </div>
          </div>
      </div>
    <div class="show-box" v-show="permission.pe_values.fa">
        <div  @click="goToFetusAction">
          <el-card class="box-card">
              <template #header>
                  <span>胎动记录</span>
              </template>
              <div v-for="o in dataRecods.fetusActionAll" :key="o" class="card-text">
                  <el-row>
                      <el-col :span="12">  <div style="text-align: left">{{ o.fetusActionAll.actionDate}}</div></el-col>
                      <el-col :span="12">  <div  style="text-align: right">{{ o.fetusActionAll.actionTimesAll}}次</div></el-col>
                  </el-row>
              </div>
          </el-card>
        </div>
    </div>
      <div class="show-box" v-show="permission.pe_values.fd">
          <div  @click="goToFeedData">
              <el-card class="box-card">
                  <template #header>
                      <span>喂养记录</span>
                  </template>
                  <div v-for="o in dataRecods.feedDataAll" :key="o" class="card-text">
                      <el-row>
                          <el-col :span="12">  <div style="text-align: left">{{ o.feedDataAll.feedDate}}</div></el-col>
                          <el-col :span="12">  <div  style="text-align: right">{{ o.feedDataAll.feedCapacityAll}}次</div></el-col>
                      </el-row>
                  </div>
              </el-card>
          </div>
      </div>
      <div class="show-box" v-show="permission.pe_values.wb">
          <div @click = "goToWeibo"  >
              <el-card class="box-card">
                  <div v-for="o in dataRecods.wbData" :key="o" class="card-text">
                      <el-row>
                          <el-col :span="2">
                              <div style="text-align: left">
                                  <img :src="o.userInfo.avatar? o.userInfo.avatar : avatarImg" style="width: 100%">
                              </div>
                          </el-col>
                          <el-col :span="8">
                              <div  class="wb_simple">
                                  {{ o.userInfo.nickName? o.userInfo.nickName: o.userInfo.username}}
                              </div>
                          </el-col>
                          <el-col :span="14">
                              <div  class="wb_simple" style="text-align: right;">{{ o.wbInfo.wbContent}}</div>
                          </el-col>
                      </el-row>
                  </div>
              </el-card>
          </div>
      </div>
      </van-pull-refresh>
  </div>
</template>

<style>

  .header{
      padding-top: 60px;
      padding-bottom: 20px;
      padding-left: 30px;
      background-color: #5195FF;
      color:white;
      text-align: left;
  }
  .show-box{
      padding:3px 12px;
      text-align: left;
  }
.wb_simple{
    text-align: left;line-height: 27px;padding-left: 5px;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;
}

</style>
<script setup>
import {onMounted, reactive, getCurrentInstance} from "vue";
import {get_user} from  "@/axios/login";
import {get_fa} from  "@/axios/fetusAction";
import {get_feed} from  "@/axios/feedData";
import {get_wb} from  "@/axios/weibo";
import {useRouter,useRoute} from 'vue-router'
import avatarImg from  "../assets/img/panda.png"
import {whole_init} from  "@/util/Permission"


const router = useRouter();

const that = getCurrentInstance()

const goToFetusAction = () => {
    router.push("/fetusAction")
}

const goToFeedData = () => {
    router.push("/feedData")
}

const goToWeibo = () => {
    router.push("/weibo")
}
const goInfo =() =>{
    router.push("/infoEdit")
}


const userinfo = reactive({
    username : "",
    nickName:"",
    avatar: avatarImg
})
const permission = reactive({
   pe_values:{}
})


const dataRecods = reactive({
    fetusActionAll : [],
    feedDataAll: [],
    wbData: []
})
const common = reactive({
    refresh : false
})

const onRefresh = () => {
        per_fa()
        per_fd()
        per_wd()
        common.refresh = false
};

const per_fa = () =>{
    if(permission.pe_values.fa){
        get_fa({"size":4}).then(res=>{
            dataRecods.fetusActionAll = res.data.data.records
        }).catch(err=>{

        })
    }
}

const per_fd = () =>{
    if(permission.pe_values.fd) {
        get_feed({"size": 4}).then(res => {
            dataRecods.feedDataAll = res.data.data.records
        }).catch(err => {

        })
    }
}

const per_wd = () =>{
    if(permission.pe_values.wb){
        get_wb({"size":6}).then(res=>{
            dataRecods.wbData = res.data.data.records
        }).catch(err=>{

        })
    }
}

onMounted(() => {
  get_user().then(res=>{
    userinfo.username = res.data.data.username
    userinfo.nickName = res.data.data.nickName
    userinfo.avatar = res.data.data.avatar ? res.data.data.avatar : avatarImg
    permission.pe_values = whole_init(res.data.data.authorities)
    if(permission.pe_values){
        per_fa()
        per_fd()
        per_wd()
    }
  }).catch(err=>{

  }) ;
})



</script>
